<template>
  <div class="patientDetails">
    <navBar :name="'患者详情'" />
    <div class="patientDetails_body">
      <div class="patientDetails_body_item">
        <div class="left">姓名</div>
        <div class="right">{{ userInfo.userInfo.name || "0" }}</div>
      </div>
      <div class="patientDetails_body_item">
        <div class="left">性别</div>
        <div class="right">{{ userInfo.userInfo.sex || "0" }}</div>
      </div>
      <div class="patientDetails_body_item">
        <div class="left">年龄</div>
        <div class="right">{{ userInfo.userInfo.age || "0" }}</div>
      </div>
      <div class="patientDetails_body_item">
        <div class="left">病情描述</div>
        <div class="right">{{ userInfo.content || "0" }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { ref } from "vue";
import navBar from "@/components/commonComponents/navBar.vue";
export default {
  name: "patientDetails",
  components: { navBar },
  setup() {
    const route = useRoute();
    const userInfo = ref(null);
    userInfo.value = JSON.parse(route.query.user);
    return {
      userInfo,
    };
  },
};
</script>

<style lang="scss" scope>
.left {
  width: 25%;
  color: #646464;
}
.right {
  width: 60%;
}
.patientDetails {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow-y: scroll;
  background-color: #fafafa;
  z-index: 12;
  overflow-x: hidden;
  &_body {
    padding: 60px 20px 10px 20px;

    background-color: #fff;
    &_item {
      margin: 10px;
      display: flex;
      align-items: center;
      font-size: 16px;
      padding: 5px 0;
    }
  }
}
</style>
